<template>
  <div class="zui-sortable-inputs-field" :class="{ 'label-position-top': labelPosition == 'top' }">
    <zui-field
      class="field"
      :padding="fieldPadding"
      :label-position="labelPosition"
      :label-style="labelStyle"
      :round="round"
      :show-shadow="showShadow"
      :label="label"
      :clickable="false"
      :required="required"
    >
      <template #accessory>
        <zui-sortable-inputs class="inputs" v-model="value" :options="options" :multiple="multiple" itemPadding="0px" />
      </template>
    </zui-field>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: Array,
  options: Array,
  multiple: Boolean,
  round: Boolean,
  showShadow: Boolean,
  labelPosition: String,
  // weak/normal/strong
  labelStyle: String,
  label: String,
  required: Boolean
})

const fieldPadding = props.labelPosition == 'top' ? '16px 20px 12px 20px' : '0px 20px'

const value = ref(props.modelValue)
watch(
  () => props.modelValue,
  (val) => {
    value.value = val
  }
)
watch(value, (inputValue) => {
  emit('update:modelValue', inputValue)
})
</script>
<style lang="scss" scoped>
.zui-sortable-inputs-field {
  &.label-position-top {
    .inputs {
      width: 100%;
      margin-top: 4px;
    }
  }
}
</style>
